<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算距离</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "dba528dcd7d571a231a330b532a6cf61",
        };
    </script>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=2.0&key=4fbb5ae31246fb4337678f7649c87b1b&plugin=AMap.Driving"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <style type="text/css">
        #container {
            width: 782px;
            height: 440px;
            overflow: hidden;
        }

        .layui-form-item {
            margin-bottom: 0;
        }

        .layui-form-item {
            clear: both;
        }

        .layui-inline {
            margin-bottom: 5px;
            margin-right: 10px;
        }

        .layui-inline {
            vertical-align: middle;
        }

        .layui-inline {
            position: relative;
        }

        .layui-inline {
            display: inline-block;
        }

        .layui-input {
            display: block;
            width: 100%;
            padding-left: 10px;
        }

        .layui-input {
            height: 32px;
            line-height: 1.3;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
        }

        .layui-btn {
            margin-left: 10px;
            transition: none;
        }

        .layui-btn {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 12px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }

        .layui-field-title {
            border-width: 1px 0 0;
        }

        .layui-elem-field {
            padding: 0;
            border-style: solid;
        }

        fieldset {
            display: block;
            margin-inline-start: 2px;
            margin-inline-end: 2px;
            padding-block-start: 0.35em;
            padding-inline-start: 0.75em;
            padding-inline-end: 0.75em;
            padding-block-end: 0.625em;
            min-inline-size: min-content;
        }

        .layui-elem-field legend {
            margin-left: 20px;
            padding: 0 10px;
            font-size: 12px;
            font-weight: 600;
        }

        legend {
            display: block;
            padding-inline-start: 2px;
            padding-inline-end: 2px;
            border-width: initial;
            border-style: none;
            border-color: initial;
            border-image: initial;
        }
    </style>
</head>
<body>
<div class="layui-form-item">
    <div class="layui-inline">
        <input id="kilometer" class="layui-input" type="text" placeholder="输入公里数"/>
    </div>
    <div class="layui-inline">
        <button id="confirm" type="button" class="layui-btn" onclick="confirm()">确定</button>
    </div>
    <div class="layui-inline">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
            <legend>公里数：<span id="kilometerts">0</span></legend>
        </fieldset>
    </div>
    <div class="layui-inline">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
            <legend>时间：<span id="timetongxing">0</span>分钟</legend>
        </fieldset>
    </div>
</div>
<div id='container'></div>
<!--<div id="panel"></div>-->
</body>
<script type="text/javascript">
    // 获取 URL 参数的函数
    function getUrlParam(name) {
        // 利用正则表达式获取 URL 参数的值
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    };

    // 匹配 URL 中的查询参数
    function GetUrlByParamName(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var URL = decodeURI(window.location.search);
        var r = URL.substr(1).match(reg);
        if (r != null) {
            //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
            return decodeURI(r[2]);
        }
        ;
        return null;
    };

    // 获取 URL 参数中的经纬度和公里数
    var set_longitude = GetUrlByParamName("set_longitude");
    var set_latitude = GetUrlByParamName("set_latitude");
    // 如果发货地址经纬度不存在，弹出警告
    if (set_longitude == null || set_longitude == '') {
        alert('计算失败！发货地址经纬度不存在！');
    }

    var get_longitude = GetUrlByParamName("get_longitude");
    var get_latitude = GetUrlByParamName("get_latitude");
    // 如果收货地址经纬度不存在，弹出警告
    if (get_longitude == null || get_longitude == '') {
        alert('计算失败！收货地址经纬度不存在！');
    }

    var kilometer = GetUrlByParamName("kilometer");
    // 设置输入框的值为从 URL 参数获取的公里数
    $("#kilometer").val(kilometer)

    var map = new AMap.Map("container", {
        viewMode: '2D',
        zoom: 11,
        resizeEnable: true
    });

    var drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME,
        ferry: 1,
        map: map,
    }

    // 构造路线导航类
    var driving = new AMap.Driving(drivingOption)

    // 根据起终点经纬度规划驾车导航路线
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(set_longitude, set_latitude), new AMap.LngLat(get_longitude, get_latitude), function (status, result){
        if (status === 'complete') {

            // 获取路程和时间
            var distance = result.routes[0].distance / 1000; // 距离转换为公里
            var duration = Math.floor(result.routes[0].time / 60); // 时间转换为分钟

            // 更新页面上的显示
            document.getElementById("kilometerts").textContent = distance.toFixed(2);
            document.getElementById("timetongxing").textContent = duration;
            $("#kilometer").val(distance.toFixed(2));

            log.success('绘制驾车路线完成')
        } else {
            log.error('获取驾车数据失败：' + result)
        }
    });

    // 确定按钮的事件处理函数
    function confirm() {
        // 将用户输入的公里数存储到父页面的 BasicAddressInfoDlg 对象中
        parent.BasicAddressInfoDlg.data.kilometer = $("#kilometer").val();
        var Index = parent.layer.getFrameIndex(window.name); // 获取当前页面的索引
        parent.layer.close(Index); // 关闭当前页面
    }

    // 返回按钮的事件处理函数
    function backupPage() {
        var Index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(Index);
    }
</script>
</html>
